<template>
    <div class="quick-trade">
        <div class="title-box">
            <div class="title">Quick Trade</div>
            <div class="more" @click="show_trading_selector = true">Advanced Mode</div>
        </div>
        <div class="input-box">
            <div class="count-line">
                <div class="left-box">
                    <div class="input-key">Quantity</div>
                    <input type="text" inputmode="decimal" placeholder="1" min="1" step="1" v-model="quantity" @input="checkQuantity" />
                </div>
                <div class="right-box">
                    <div class="input-key">Order Type</div>
                    <div class="select-box">
                        <div class="active">Market</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="value-box">
            <div class="val">
                <div class="k">Stock Account</div>
                <div class="v">${{ userInfo.balance }}</div>
            </div>
            <div class="val">
                <div class="k">Max Buy</div>
                <div class="v">{{ max_buy_count }}</div>
            </div>
            <div class="val">
                <div class="k">Holding</div>
                <div class="v">{{ stock_holding_count }}</div>
            </div>
        </div>
        <div class="btn-box">
            <div class="btn" @click="quickBuy" style="background-color: var(--positive-number-color)">
                <div>Buy</div>
            </div>
            <div class="btn" @click="quickSell" :style="`background-color: ${ market_status.close ? 'var(--negative-number-color)' : 'var(--text-light-color)' }`">
                <div>Sell</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { stock_list, market_status, stock_detail_data, max_buy_count, stock_holding_count } from '@/service/market';
import { active_stock, quantity, order_type_selected, tradingService, show_trading_selector } from '@/service/trading';
import { loading } from '@/service/status';
import { checkNonDigit } from '@/utils/input';
import { is_login } from '@/service/auth';
import { toast } from '@/service/status';
import { userInfo } from '@/service/user';

function checkQuantity(e) {
    checkNonDigit(e, quantity);
}

const searchStr = ref('');

const show_stock_list = computed(() => {
    if (!searchStr.value) {
        show_more_symbol.value = false;
        return stock_list.value;
    }
    show_more_symbol.value = true;
    return stock_list.value.filter(item => item.symbol.toLowerCase().includes(searchStr.value.toLowerCase()));
});

const order_type_list = [
    {
        id: 0,
        name: 'Market',
    },
    {
        id: 1,
        name: 'Limit',
    },
];

const active_order_type = ref(order_type_list[0]);
const show_order_type_selector = ref(false);
function select_order_type(item) {
    active_order_type.value = item;
    order_type_selected.value = item.id;
    show_order_type_selector.value = false;
}

const show_more_symbol = ref(false);

function select_symbol(item) {
    searchStr.value = item.symbol;
    show_more_symbol.value = false;
    active_stock.value = item;
}

// 快速交易的逻辑
async function quickBuy() {
    // 校验是否登陆
    if (!is_login.value) {
        toast.warning('Please login', 1500);
        return ;
    }
    // 获取参数
    let symbolId = stock_detail_data.value.id;
    let count = quantity.value;
    // 请求接口
    loading.value = true;
    await tradingService.quickBuy(symbolId, count);
    loading.value = false;
}

async function quickSell() {
    // 校验是否登陆
    if (!is_login.value) {
        toast.warning('Please login', 1500);
        return ;
    }
    // 获取参数
    let symbolId = stock_detail_data.value.id;
    let count = quantity.value;
    // 请求接口
    loading.value = true;
    await tradingService.quickSell(symbolId, count);
    loading.value = false;
}
</script>

<style scoped lang="less">
.quick-trade {
    box-sizing: border-box;
    width: 100%;
    padding: 3vw;
    border-radius: 3vw;
    background-color: #fff;
    box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 3vw;

    .title-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
            font-size: 3.5vw;
            font-weight: 700;
            color: var(--text-color);
        }

        .more {
            font-size: 3.5vw;
            font-weight: 500;
            color: var(--active-color);
        }
    }

    .input-box {
        display: flex;
        flex-direction: column;
        gap: 2.5vw;

        .input-key {
            font-size: 3vw;
            color: var(--text-color);
        }

        // .stock-line {
        //     display: flex;
        //     flex-direction: column;
        //     gap: 1.5vw;
            
        //     .input-box {
        //         box-sizing: border-box;
        //         position: relative;
        //         width: 100%;
        //         height: 8vw;
        //         font-size: 2.5vw;
        //         border-radius: 1vw;
        //         background-color: var(--bg-strong-color);

        //         &>input {
        //             font-size: 2.5vw;
        //             padding: 2vw;
        //             border: 0;
        //             outline: 0;
        //             background-color: var(--bg-strong-color);
        //             border-radius: 1vw;
        //         }
    
        //         .select-list {
        //             box-sizing: border-box;
        //             width: 100%;
        //             box-shadow: 0 0 1vw rgba(0, 0, 0, 0.1);
        //             display: flex;
        //             flex-direction: column;
        //             background-color: #fff;
        //             position: absolute;
        //             top: 8vw;
        //             left: 0;
        //             z-index: 1;
                    
        //             .select-item {
        //                 box-sizing: border-box;
        //                 width: 100%;
        //                 height: 8vw;
        //                 font-size: 2.5vw;
        //                 padding: 2vw;
        //             }
        //         }
        //     }
        // }

        .count-line {
            display: flex;
            align-items: center;
            gap: 3vw;

            .left-box, .right-box {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 1.5vw;
            }

            .left-box input {
                box-sizing: border-box;
                width: 100%;
                height: 8vw;
                font-size: 2.5vw;
                padding: 2vw;
                border: 0;
                outline: 0;
                background-color: var(--bg-strong-color);
                border-radius: 1vw;
            }

            // .right-box select {
            //     box-sizing: border-box;
            //     width: 100%;
            //     font-size: 2.5vw;
            //     padding: 2vw;
            //     border: 0;
            //     outline: 0;
            //     background-color: var(--bg-strong-color);
            //     border-radius: 1vw;

            //     option {
            //         font-size: 2.5vw;
            //     }
            // }

            .right-box {
                .select-box {
                    box-sizing: border-box;
                    position: relative;
                    width: 100%;
                    height: 8vw;
                    font-size: 2.5vw;
                    padding: 2vw;
                    border-radius: 1vw;
                    background-color: var(--bg-strong-color);

                    // &::after {
                    //     content: '';
                    //     display: block;
                    //     --size: 1vw;
                    //     width: var(--size);
                    //     height: var(--size);
                    //     border-right: 0.1vw solid var(--text-color);
                    //     border-bottom: 0.1vw solid var(--text-color);
                    //     position: absolute;
                    //     top: 50%;
                    //     right: 3vw;
                    //     transform: translateY(-50%) rotate(45deg);
                    // }

                    .active {
                        position: absolute;
                        top: 50%;
                        left: 3vw;
                        transform: translateY(-50%);
                        font-size: 2.5vw;
                    }

                    .select-list {
                        box-sizing: border-box;
                        width: 100%;
                        box-shadow: 0 0 1vw rgba(0, 0, 0, 0.1);
                        display: flex;
                        flex-direction: column;
                        background-color: #fff;
                        position: absolute;
                        top: 8vw;
                        left: 0;
                        z-index: 1;
                        
                        .select-item {
                            box-sizing: border-box;
                            width: 100%;
                            height: 8vw;
                            font-size: 2.5vw;
                            padding: 2vw;
                        }
                    }
                }
            }
        }
    }

    .value-box {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 2.5vw;
        padding: 3vw;
        border-radius: 2vw;
        background-color: var(--bg-color);

        .val {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .k, .v {
                font-size: 3vw;
            }

            .k {
                font-weight: 500;
            }
        }
    }

    .btn-box {
        margin-top: 2vw;
        display: flex;
        gap: 2vw;

        .btn {
            flex: 1;
            height: 10vw;
            border-radius: 1.5vw;
            display: flex;
            justify-content: center;
            align-items: center;

            &>div {
                font-size: 3vw;
                font-weight: 600;
                color: #fff;
            }
        }
    }
}
</style>